<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

    </style>
</head>
<body>
<div id="app">
    <template>


        <div>
            <el-button  type="danger" style="position: relative;top: 40px" round @click="addVehicle">添加车辆</el-button>
            <el-form ref="form" :model="form" >
                <el-form-item style="float: right">
                    <el-input v-model="form.name"  placeholder="请输入车辆类型" style="width: 200px"></el-input>
                    <el-button type="primary" round  @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <template>
            <el-table
                    :data="Vehicles"
                    style="width: 100%">
                <el-table-column label="车辆名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.vehicleName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车牌号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.numberPlate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车辆类型">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.vehicleType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="物流公司">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.logistics.logisticsName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="驾驶员">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.driver.driverName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车辆载重">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.driverCapacity }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="尺寸">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.driverSize }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.status }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建人">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.u_username }}</span>
                    </template>
                </el-table-column>


                <el-table-column  align="center" prop="scope.row.createTime"
                                  :formatter="createDateFormat"
                                  :resizable="false" label="创建时间" >
                    <!--                    <template slot-scope="scope">-->
                    <!--                        <span style="margin-left: 10px">{{ scope.row.joinTime }}</span>-->
                    <!--                    </template>-->
                </el-table-column>
                <el-table-column label="修改人">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.s_username }}</span>
                    </template>
                </el-table-column>


                <el-table-column  align="center" prop="scope.row.updateTime"
                                  :formatter="dateFormat"
                                  :resizable="false" label="修改时间" >
                    <!--                    <template slot-scope="scope">-->
                    <!--                        <span style="margin-left: 10px">{{ scope.row.joinTime }}</span>-->
                    <!--                    </template>-->
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.remarks }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"
                                   circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="open(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--分页查询-->
        <el-pagination    class="pagination"    background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="current"
                          :page-sizes="[3,5,8,10]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next"
                          :total="total">

        </el-pagination>

        <!--保存用户的对话框-->
        <el-dialog title="产品信息" :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="vehicle">
                <el-form-item label="车辆名称" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.vehicleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车牌号" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.numberPlate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车辆类型" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.vehicleType" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="物流公司" :label-width="formLabelWidth">
                    <el-select v-model="logisticValue">
                        <el-option
                                v-for="logistic in logistics"
                                :key="logistic.logisticsId"
                                :value="logistic.logisticsName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="驾驶员" :label-width="formLabelWidth">
                    <el-select  v-model="driverValue" >
                        <el-option
                                v-for="driver in drivers"
                                :key="driver.driverId"
                                :value="driver.driverName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车辆载重" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.driverCapacity" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="尺寸" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.driverSize" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.status" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="vehicle.remarks" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveVehicle">确 定</el-button>
            </div>
        </el-dialog>

    </template>
</div>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                dialogFormVisible: false,//控制对话框的显示
                Vehicles: null,  //获取集合存入
                formLabelWidth: '120px', //表单标签的宽度
                total: 0,//总条数
                logistics:null,
                current: 1,//当前条数
                driverName:'',
                logisticsName:'',
                pageSize:5, //每页条数
                drivers:null,
                logisticValue:null,
                driverValue:null,
                vehicle: {
                    vehicleId:'',
                    vehicleName: '',
                    numberPlate: '',
                    vehicleType: '',
                    driverCapacity: '',//真实姓名
                    driverSize: '',//盐
                    status: '',//电话
                    remarks: ''
                },
                form: {
                    name: '',
                }

            }
        },
        methods: {
            closeMyDialog() { //清空数据，关闭对话框
                this.vehicle={
                    vehicleId:'',
                    vehicleName: '',
                        numberPlate: '',
                        vehicleType: '',
                        driverCapacity: '',//真实姓名
                        driverSize: '',//盐
                        status: '',//电话
                        remarks: ''
                }
            },
            addVehicle(){
                axios.get("addVehicle")
                    .then(value => {
                        if (value.data.state==1){
                            this.logistics = value.data.data;
                        }

                    })
                axios.get("selectDriver")
                    .then(value => {
                        if (value.data.state==1){
                            this.drivers = value.data.data;                        }

                    })
                this.dialogFormVisible = true;
            },
            loadPage() {



                axios.get("/likeVehicle",{params:{current:this.current,name:this.form.name,pageSize:this.pageSize}}).then(value => {
                        if (value.data.state == 1){
                            this.Vehicles = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    })
            },

            saveVehicle() {//确认按钮,保存用户信息
                if (this.vehicle.vehicleId == '') {
                    axios.post("/vehicleAdd/"+this.logisticValue+"/"+this.driverValue, this.vehicle)
                        .then(value => {
                            if (value.data.state == 1) {
                                this.loadPage(1);
                            }
                        });

                } else {
                    axios.put("/vehicleUpdate/"+this.logisticValue+"/"+this.driverValue, this.vehicle)
                        .then(value => {
                            if (value.data.state == 1) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                                //this.loadPage(this.current);
                                this.loadPage(1);
                            }
                        });
                }
                this.dialogFormVisible = false;//隐藏对话框
            },


            deleteLogistics(index, row) {
                axios.delete("/deleteLogistic/" + row.vehicleId)
                    .then(value => {
                        if (value.data.state == 1) {
                            alert("修改成功");
                            this.row = value.data.data;
                            this.loadPage(1);
                            //this.loadPage(this.current);
                        }

                    })
            },
            handleCurrentChange(page){
                this.current = page;
                    this.loadPage({params:{current:page,pageSize:this.pageSize}})


            },
            handleSizeChange(size){
                this.pageSize = size;
                axios.get("/selectVehicles/"+this.pageSize+"?current=" + this.current).then(value => {
                    console.log(value);
                    if (value.data.state == 1) {
                        this.Vehicles = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                })
            },
            handleEdit(index, row) {//修改

                console.log(index, row);
                this.vehicle = row;
                this.logisticValue = row.logistics.logisticsName;
                this.driverValue = row.driver.driverName;
                axios.get("addVehicle")
                    .then(value => {
                        if (value.data.state==1){
                            this.logistics = value.data.data;
                        }

                    })
                axios.get("selectDriver")
                    .then(value => {
                        if (value.data.state==1){
                            this.drivers = value.data.data;                        }

                    })
                this.dialogFormVisible = true;
            },

            search(){
                this.loadPage(this.current)

            },
            dateFormat:function(row,column){
                console.log(column);
                var date = new Date(row.updateTime);
                console.log(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            },
            createDateFormat:function(row,column){
                console.log(column);
                var date = new Date(row.createTime);
                console.log(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            },
            open(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/deleteVehicle/" + row.vehicleId)
                        .then(value => {
                            this.row = value.data.data;
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadPage(1);
                            //this.loadPage(this.current);

                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },


        mounted() {//vue挂载
            this.loadPage(1);
        }
    });

</script>
</body>
</html>